<template>
	<view class="home-container">
		<!-- 轮播图 -->
		<swiper v-if="swiperList.length" class="swiper-list" :indicator-dots="true" :autoplay="true" circular
			:interval="3000" :duration="1000">
			<swiper-item v-for="(item) in swiperList" :key="item.bannerid">
				<view class="swiper-item">
					<image :src="item.img" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 菜单列表 -->
		<uni-grid :column="5" class="grid-list" :showBorder="false">
			<uni-grid-item class="grid-item" v-for="item in menuList" :key="item.id">
				<image :src="item.icon" mode=""></image>
				<text class="text">{{item.title}}</text>
			</uni-grid-item>
		</uni-grid>

		<!-- 商品列表 -->
		<view class="goods-list">
			<view class="goods-item" v-for="item in goodsList" :key="item.proid" @click="goToDetail(item.proid)">
				<image :src="item.img2" mode=""></image>
				<view class="title">{{item.proname}}</view>
				<view class="desc">{{item.desc}}</view>
				<view class="price">￥{{format(item.originprice)}}</view>
			</view>
		</view>
		<!-- 加载更多 -->
		<uni-load-more :status="status"
			:content-text="{contentdown: '上拉显示更多',contentrefresh: '拼老命加载中',contentnomore: '别拉了，没有辣'}"></uni-load-more>
	</view>
</template>

<script>
	import {
		getGoodsList,
		getMenuList,
		getSwiperList
	} from '../../api/home'
	import formatPrice from '../../utils/format.js'


	export default {
		data() {
			return {
				swiperList: [],
				menuList: [],
				limitNum: 10, //商品查询参数一页十条
				count: 1, //商品查询参数第几页，
				goodsList: [],
				status: 'loading'
			}
		},
		onLoad() {
			this.getSwiperListData()
			this.getMenuListData()
			this.getGoodsListData()
		},

		methods: {
			// 获取轮播图
			async getSwiperListData() {
				const res = await getSwiperList()
				this.swiperList = res.data
			},

			// 获取菜单
			async getMenuListData() {
				const res = await getMenuList()
				this.menuList = res.data
			},

			// 获取商品列表数据
			async getGoodsListData() {
				const res = await getGoodsList({
					limitNum: this.limitNum,
					count: this.count
				})

				// 数据请求到，关闭下拉
				uni.stopPullDownRefresh()

				if (res.data.length === 0) return this.status = 'noMore'
				this.goodsList = [...this.goodsList, ...res.data]
			},

			// 上拉加载更多
			onReachBottom() {
				if (this.status === 'noMore') return
				this.count++
				this.getGoodsListData()
			},

			// 跳转到详情页
			goToDetail(proid) {
				console.log(proid);
				uni.navigateTo({
					url: `/subpkg/goodsDetail/goodsDetail?proid=${proid}`
				})
			},
			format(val) {
				return formatPrice(val)
			}
		},

		//下拉刷新 
		onPullDownRefresh() {
			this.count = 1
			this.goodsList = []
			this.getGoodsListData()
		}
	}
</script>

<style scoped lang="scss">
	.swiper-list {
		width: 750rpx;
		height: 350rpx;

		.swiper-item {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%
			}
		}
	}

	.grid-list {
		padding-top: 20px;
		box-sizing: border-box;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
		background-color: #fff;

		.grid-item {
			width: 150rpx;
			height: 150rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			justify-content: center;

			image {
				text-align: center;
				margin-left: 24px;
				width: 56rpx;
				height: 56rpx
			}

			text {
				margin-top: 10px;
				font-size: 12px;
				color: #646566
			}
		}
	}

	.goods-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		box-sizing: border-box;
		width: 100%;
		padding-left: 10rpx;
		padding-right: 10rpx;

		.goods-item {
			box-sizing: border-box;
			background-color: #fff;
			padding: 5.33333vw;
			border-radius: 1.33333vw;
			display: flex;
			align-items: center;
			width: 48%;
			flex-direction: column;
			margin-top: 1.33333vw;

			image {
				width: 26.66667vw;
				height: 32vw;
			}

			.title {
				font-size: 3.73333vw;
				display: inline-block;
				white-space: nowrap;
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-top: 4vw;
				color: #000;
			}

			.desc {
				font-size: 3.2vw;
				color: #c3c3c3;
				display: inline-block;
				white-space: nowrap;
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-top: 2.66667vw;
			}

			.price {
				font-size: 3.2vw;
				margin-top: 2.66667vw;
				color: red;
			}
		}
	}
</style>